<script setup lang="ts">
import { ref } from 'vue';
import Panel from './Panel.vue';
import ProcessListenerTable from '@/components/flow/ProcessListenerTable.vue';

const model = ref({});
const visible = ref(false);
defineExpose({
  open(data: any) {
    model.value = data;
    visible.value = true;
  },
});

const options = ref([{ label: `年龄(age)`, text: '${' + 'age' + '}' }]);

function close() {
  model.value.description ??= model.value.condition;
}
</script>

<template>
  <panel v-model:visible="visible" width="600px" @close="close">
    <template #header>
      <input v-model="model.name" />
    </template>
    <t-form label-align="top" class="gl-h100">
      <t-tabs default-value="1" class="gl-h100 gl-tabs-auto-h gl-tabs-space">
        <t-tab-panel label="条件设置" value="1">
          <template v-if="model.isDefault">默认条件</template>
          <template v-else>
            <t-form>
              <t-form-item name="condition" label="条件">
                <t-auto-complete v-model="model.condition" :options="options" />
              </t-form-item>
              <t-form-item name="description" label="描述">
                <t-input v-model="model.description" />
              </t-form-item>
            </t-form>
          </template>
        </t-tab-panel>
        <t-tab-panel label="执行监听器" value="2">
          <process-listener-table :data="model.processListeners" getaway />
        </t-tab-panel>
      </t-tabs>
    </t-form>
  </panel>
</template>

<style scoped lang="less"></style>
